<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="format-detection" content="telephone=no,email=no" />
    <title>Element China Area Data</title>
    <!-- 引入样式 -->
    <link
      rel="stylesheet"
      href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"
    />
    <style>
      .long {
        width: 250px;
      }
      .area {
        padding-top: 50px;
        margin: 0 auto;
        width: 800px;
      }
      .three {
        margin-top: 100px;
      }
      .bind {
        margin-top: 20px;
        line-height: 40px;
        text-indent: 15px;
      }
      .imp {
        color: #409eff;
      }
      .single-col {
        padding: 5px;
      }
      .single-card {
        height: 300px;
        overflow: auto;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <el-row>
        <el-col :span="12" class="single-col">
          <el-card class="single-card" header="二级联动">
            <el-cascader
              size="large"
              :options="provinceAndCityData"
              v-model="selectedOptions1"
            >
            </el-cascader>
            <div class="bind">
              <div>绑定值：{{ selectedOptions1 }}</div>
              <div>
                区域码转汉字：{{ codeToText[selectedOptions1[0]] }},{{
                codeToText[selectedOptions1[1]] }}
              </div>
            </div>
          </el-card></el-col
        >
        <el-col :span="12" class="single-col">
          <el-card class="single-card" header="二级联动,纯汉字">
            <el-cascader
              size="large"
              :options="pcTextArr"
              v-model="selectedOptions3"
            >
            </el-cascader>
            <div class="bind">
              <div>绑定值：{{ selectedOptions3 }}</div>
            </div>
          </el-card></el-col
        >
        <el-col :span="12" class="single-col">
          <el-card class="single-card" header="三级联动">
            <el-cascader
              class="long"
              size="large"
              :options="regionData"
              v-model="selectedOptions2"
            >
            </el-cascader>
            <div class="bind">
              <div>绑定值：{{ selectedOptions2 }}</div>
              <div>
                区域码转汉字：{{ codeToText[selectedOptions2[0]] }},{{
                codeToText[selectedOptions2[1]] }},{{
                codeToText[selectedOptions2[2]] }}
              </div>
            </div>
          </el-card></el-col
        >
        <el-col :span="12" class="single-col">
          <el-card class="single-card" header="三级联动,纯汉字">
            <el-cascader
              class="long"
              size="large"
              :options="pcaTextArr"
              v-model="selectedOptions4"
            >
            </el-cascader>
            <div class="bind">
              <div>绑定值：{{ selectedOptions4 }}</div>
            </div>
          </el-card></el-col
        >
      </el-row>
    </div>
  </body>
  <script src="https://unpkg.com/element-china-area-data@6.0.0/dist/element-china-area-data.iife.js"></script>
  <script src="https://unpkg.com/vue@2/dist/vue.js"></script>
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <script>
    new Vue({
      el: "#app",
      data: function () {
        return {
          visible: false,
          codeToText: elementChinaAreaData.codeToText,
          provinceAndCityData: elementChinaAreaData.provinceAndCityData,
          pcTextArr: elementChinaAreaData.pcTextArr,
          regionData: elementChinaAreaData.regionData,
          pcaTextArr: elementChinaAreaData.pcaTextArr,
          selectedOptions1: ["11", "110101"],
          selectedOptions2: ["12", "1201", "120101"],
          selectedOptions3: ["北京市", "朝阳区"],
          selectedOptions4: ["北京市", "市辖区", "朝阳区"],
        };
      },
    });
  </script>
</html>
